<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="static/js/vue"></script>
    <style>

        .message {
            display: block;
        {#max-width: 500px;#} position: relative;
        }

        .message span {
            max-width: 500px;
            word-break: break-all;
            word-wrap: break-word;
            display: block;
            padding: 8px 10px;
            background-color: white;
            border-radius: 5px;
        }

        .message span1 {
            max-width: 500px;
            word-break: break-all;
            word-wrap: break-word;
            display: block;
            padding: 8px 10px;
            background-color: white;
            border-radius: 5px;
        }


        .item-row .message span:before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right: 8px solid white;
            position: absolute;
            left: -16px;
        }

        .item-row .message span1:before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right: 8px solid white;
            position: absolute;
            left: -16px;
        }

        .item-row-reverse .message span {
            background-color: #a6e860;

        }

        .item-row-reverse .message span:before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right: 8px solid #a6e860;
            position: absolute;
            right: -16px;
            transform: rotate(180deg);
        }

        .item-row-reverse .message span1:before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right: 8px solid #fff;
            position: absolute;
            right: -16px;
            transform: rotate(180deg);
        }

        .list {
            margin: 50px auto;
            width: 800px;
            background-color: #f2f2f2;
            padding: 10px
        }

        .item-row {
            display: flex;
            flex-direction: row;
            /*align-items: center;*/
            margin-bottom: 20px;

        }

        .item-row-reverse {
            display: flex;
            flex-direction: row-reverse;
            /*align-items: center;*/
            margin-bottom: 20px;

        }

        .item-row .head {
            margin-right: 15px;
        }

        .item-row-reverse .head {
            margin-left: 15px;
        }

        .head img {
            width: 35px;
            height: 35px;
            vertical-align: middle;
            border-radius: 6px;
        }

        .refermsg {
            background-color: #e7e7e7;
            color: #737373;
            font-size: 13px;
            padding: 5px;

            border-radius: 5px;
            margin: 5px 0;
        }

        a {
            color: black;
            text-decoration: none;
        }

        .systemMsg {
            color: #b2b2b2;
            font-size: 13px;
            width: 800px;
            text-align: center;
        }


    </style>
</head>
<body>

<div id="app">
    <div class="list">
        <div align="center"><h2>{{ session["nickname"] }}</h2></div>
        <hr>
        <div v-for="item in chat_msg" :key="item.mesLocalID">
            <div :class="item.is_me?'item-row-reverse':'item-row'">
                <!-- 显示头像 -->
                <div v-if="item.sender_wxid && item.messageType != 10000">
                    <div class="head"><img :src="item.head_url"></div>
                </div>

                <div>
                    <div v-if="!item.is_me && item.messageType != 10000" style="font-size: 13px;margin-bottom: 5px">${
                        item.user_name ||
                        item.sender_wxid }
                    </div>

                    <div class="message">
                        <!-- 腾讯新闻  -->
                        <div v-if="item.msgSource == '' && item.messageType == 1">
                            <div style="width: 65%;
                                padding: 20px 20px;
                                background-color: white;
                                border-radius: 5px;
                                margin: auto;                                "
                            >

                                <div>
                                    <a :href=item.msgContent.mmreader.category.item.url target="_blank">
                                        <img :src="`/img?url=${item.msgContent.mmreader.category.item.cover}`"
                                             style="width: 100%;"/>
                                        <div>${item.msgContent.mmreader.category.item.title}</div>
                                    </a>
                                </div>


                                <div v-for="newitem, index in item.msgContent.mmreader.category.newitem">
                                    <a :href=newitem.url target="_blank">
                                        <div v-if="index !=0"
                                             style="  display: flex;  justify-content: space-between; margin-top: 15px;">

                                            <div style="width: 430px; border-bottom: #f0f0f0 1px solid">
                                                ${newitem.title}
                                            </div>
                                            <div>
                                                <img :src="`/img?url=${newitem.cover}`"
                                                     style="width: 50px;"/>
                                            </div>

                                        </div>
                                    </a>
                                </div>
                            </div>

                        </div>

                        <!-- 普通文本    -->
                        <div v-else-if="item.messageType == 1">
                            <span>${item.msgContent}</span>
                        </div>

                        <!--系统消息-->
                        <div v-else-if="item.messageType == 10000" class="systemMsg">
                            <div v-if="item.msgContent.sysmsg">
                                <div> ${item.msgContent.sysmsg &&
                                    item.msgContent.sysmsg.sysmsgtemplate.content_template.template}
                                </div>
                            </div>
                            <div v-else>
                                <div> ${item.msgContent }</div>
                            </div>
                        </div>


                        <!-- 图片 -->
                        <div v-else-if="item.messageType == 3">
                            <div v-if=item.file_path>
                                <img :src=item.file_path style="max-width: 500px; max-height: 300px;">
                            </div>
                            <div v-else><span> 该图片无法获取</span></div>
                        </div>

                        <!-- 表情包 -->
                        <div v-else-if="item.messageType == 47">
                            <div v-if=item.emoji_url>
                                <img :src=item.emoji_url style="max-width: 150px;">
                            </div>
                            <div v-else><span>该表情包无法获取</span></div>
                        </div>


                        <!--语音-->
                        <div v-else-if="item.messageType == 34" style="display: flex; align-items:center">
                            <div v-if="item.is_me">
                                <span>${(item.msgContent.msg.voicemsg["@voicelength"] / 1000).toFixed(0) }"&nbsp;&nbsp;&nbsp;语音消息</span>

                            </div>
                            <div v-else>
                                <span>语音消息&nbsp;&nbsp;&nbsp;${(item.msgContent.msg.voicemsg["@voicelength"] / 1000).toFixed(0) }" </span>
                            </div>

                        </div>

                        <!-- 视频 -->
                        <div v-else-if="item.messageType == 43">
                            <div v-if=item.file_path>
                                <iframe style="width: 250px; height: 200px" :src=item.file_path></iframe>
                            </div>
                            <div v-else><span> 该视频无法获取: ${item.msgContent}</span></div>
                        </div>

                        <!-- 多功能消息 -->
                        <div v-else-if="item.messageType == 49 && item.msgContent.msg">

                            <!--引用-->
                            <div v-if="item.msgContent.msg.appmsg.type == 57">
                                <div><span>${item.msgContent.msg.appmsg.title}</span></div>
                                <div class="refermsg">
                                    ${item.msgContent.msg.appmsg.refermsg.displayname}:
                                    ${item.msgContent.msg.appmsg.refermsg.content}
                                </div>
                            </div>

                            <!--拍一拍-->
                            <div v-else-if="item.msgContent.msg.appmsg.type == 62">
                                <div class="systemMsg">${item.msgContent.msg.appmsg.patMsg.records.record.templete}
                                </div>

                            </div>

                            <!--分享-->
                            <div v-else-if='["4", "5"].indexOf(item.msgContent.msg.appmsg.type) > -1'>
                                <span1 style="width: 300px; background: #fff; ">
                                    <!--<div>${item.msgContent.msg}</div>-->
                                    <a :href=item.msgContent.msg.appmsg.url target="_blank">
                                        <div style="height: 100px">
                                            <div>${item.msgContent.msg.appmsg.title.slice(0, 40)}</div>
                                            <div style="color:#b2b2b2; font-size: 13px;">
                                                ${item.msgContent.msg.appmsg.des}
                                            </div>
                                        </div>

                                        <div style="color:#b2b2b2; font-size: 13px; border-top: solid #f0f0f0 1px;">
                                            ${item.msgContent.msg.appmsg.sourcedisplayname ||
                                            item.msgContent.msg.appinfo && item.msgContent.msg.appinfo.appname}
                                        </div>
                                    </a>
                                </span1>
                            </div>

                            <!--小程序-->
                            <div v-else-if='["33", "36"].indexOf(item.msgContent.msg.appmsg.type) > -1'>

                                <!--<div v-else-if="item.msgContent.msg.appmsg.type == 36">-->
                                <span1 style="width: 250px;  background: #fff;">
                                    <div style="display: flex">
                                        <img :src=item.msgContent.msg.appmsg.weappinfo.weappiconurl
                                             style="width: 20px; display: block;">

                                        <div style="color:#b2b2b2; font-size: 13px;">
                                            ${item.msgContent.msg.appmsg.sourcedisplayname}
                                        </div>
                                    </div>

                                    <div> ${item.msgContent.msg.appmsg.title}</div>
                                    <div>
                                        <img style="width: 250px;"
                                             :src=item.msgContent.msg.appmsg.weappinfo.weapppagethumbrawurl>
                                    </div>
                                    <div style="color:#b2b2b2; font-size: 13px; margin:0 0 0 0; border-top: solid #f0f0f0 1px;">
                                        小程序
                                    </div>
                                </span1>
                            </div>

                            <!--红包-->
                            <div v-else-if="item.msgContent.msg.appmsg.type == 2001">
                                <!--<div> ${item.msgContent.msg}</div>-->
                                <div v-if="item.is_me">
                                    <span>[你发送了一个微信红包]</span>
                                </div>
                                <div v-else>
                                    <span>[你收到了一个微信红包，请在手机上查看]</span>
                                </div>
                            </div>

                            <!--文件-->
                            <div v-else-if="item.msgContent.msg.appmsg.type == 6">
                                <span class="appmsg" style="width: 200px; background-color: white;">
                                    <div> ${item.msgContent.msg.appmsg.title}</div>
                                    <div style="color:#b2b2b2; font-size: 13px;">${(item.msgContent.msg.appmsg.appattach.totallen / 1024).toFixed(0)} KB</div>
                                </span>
                            </div>

                            <!--聊天记录-->
                            <div v-else-if="item.msgContent.msg.appmsg.type == 19">
                                <span>
                                    <div> ${item.msgContent.msg.appmsg.title}</div>
                                    <div style="color:#b2b2b2; font-size: 13px; width: 250px;">
                                           <div v-for="msgdes in item.msgContent.msg.appmsg.des.split('\n')"
                                                :key="msgdes" style="margin: 5px 0">${msgdes}</div>
                                    <div style="  border-top: solid #f0f0f0 1px;">聊天记录</div>
                                    </div>
                                </span>


                            </div>
                            <div v-else>
                                <span>${item.msgContent.msg}</span>
                            </div>

                        </div>


                        <div v-else>
                            <span>
                                <div>${item.messageType}未知格式</div>
                                <div> ${item.sender_wxid}</div>
                                <div> ${item.msgContent}</div>
                            </span>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>


<script src="static/js/axios.min.js"></script>

<script>

    new Vue({
        el: '#app',
        delimiters: ['${', '}'],

        data: {chat_msg: []},

        mounted() {


        },
        created() {
            var _this = this
            axios.get("/msg_v1/" + "{{ mid }}" + location.search, {}).then(function (response) {
                _this.chat_msg = response.data.data;
                console.log(" response.data", response.data.data)
            }).catch(function (error) {


            });


        },
        methods: {}
    })
</script>

</body>
</html>